<template>
    <view class="ad-select-group">
            <view class="label">链接商品</view>
            <view class="input-picker">
                <view class="picker-text" >{{  selectName }}</view>    
                <picker  
                    :value="cardId" 
                    :range="l" 
                    range-key="cardName"
                    @change="changeHandle">
                       
                           <image class="allow-down" src="/static/images/allow-down.png" /> 
                           
                </picker>
            </view>
    </view>
</template>
<script lang="ts">
import {Vue, Component,Prop,Watch} from 'vue-property-decorator';

@Component({})
export default class extends Vue{
    @Prop({type:Array,default:[]}) l!:Array<any>;
    @Prop({type:Number}) idx!:number;
 
 
    selectName:string = '请选择商品';

    changeHandle(e:any){
        let i = e.detail.value;
        let idx = this.idx;
        let item = this.l[i];
        this.selectName = item.cardName;   
    
        this.$emit('setSelectGood',{
            idx,
            cardId:item.cardId
        });
     
    }

    
}
</script>
<style lang="scss">
    .ad-select{
        &-group{
             padding: 25rpx 0;
             border-bottom: 1px solid #F5F5F5;
             display: flex;
             position: relative;
             .picker-text{
                 color:#ccc;
                 font-size: 26rpx;
             }
             .label{
                    width:120rpx ;
                    color:#333;
                    font-size: 30rpx;
             }
           
             .input-picker{
                    width: 550rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
        }
    }
</style>
